<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const user = ref({
  id: route.params.id,
  name: 'boyboy',
  articles: 108,
  views: '270.7万',
  followers: 23
})
</script>

<template>
  <div class="profile-container">
    <el-card class="user-info">
      <div class="user-header">
        <h2>{{ user.name }}的个人主页</h2>
      </div>
      <div class="user-stats">
        <div class="stat-item">
          <div class="number">{{ user.articles }}</div>
          <div class="label">原创</div>
        </div>
        <div class="stat-item">
          <div class="number">{{ user.views }}</div>
          <div class="label">人气</div>
        </div>
        <div class="stat-item">
          <div class="number">{{ user.followers }}</div>
          <div class="label">粉丝</div>
        </div>
      </div>
    </el-card>

    <div class="user-articles">
      <h3>发布的文章</h3>
      <!-- 文章列表将在这里显示 -->
    </div>
  </div>
</template>

<style scoped lang="scss">
.profile-container {
  .user-info {
    margin-bottom: 20px;

    .user-header {
      margin-bottom: 20px;
      h2 {
        margin: 0;
        color: #333;
      }
    }

    .user-stats {
      display: flex;
      justify-content: space-around;
      text-align: center;

      .stat-item {
        .number {
          font-size: 24px;
          font-weight: bold;
          color: #333;
        }

        .label {
          font-size: 14px;
          color: #666;
          margin-top: 4px;
        }
      }
    }
  }

  .user-articles {
    h3 {
      margin: 0 0 20px;
      color: #333;
    }
  }
}
</style> 